---
import Layout from "../layouts/Layout.astro";
import PageHeading from "../components/page-heading.astro";
import IconMdiTag from "~icons/mdi/tag";
import IconMdiUnfoldMoreVertical from "~icons/mdi/unfold-more-vertical";
---

<Layout>
  <PageHeading>
    <th:block slot="title" th:text="标签"> </th:block>
    <th:block slot="subtitle" th:text="${#lists.size(tags)}"> </th:block>
  </PageHeading>
  <div class="post-page">
    <div class="post animated fadeInDown">
      <div class="flex flex-row flex-wrap gap-2 mb-10">
        <a
          th:each="tag : ${tags}"
          th:text="'#'+${tag.spec.displayName}"
          class="text-sm text-black/80 hover:text-black hover:underline hover:font-medium"
        >
        </a>
      </div>
      <div
        class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2"
      >
        <div th:each="tag : ${tags}" class="transition-all duration-300">
          <a
            th:href="@{${tag.status.permalink}}"
            class="hover:underline underline-offset-1"
          >
            <div
              class="inline-flex text-base font-medium text-gray-800 items-center"
            >
              <IconMdiTag class="w-5 h-5" />
              <span class="ml-2">
                <th:block th:text="${tag.spec.displayName}"></th:block>
                <sup class="text-gray-400 ml-1" th:text="${tag.postCount}"
                ></sup>
              </span>
            </div>
          </a>
          <div class="mt-3">
            <div
              th:with="posts=${postFinder.listByTag(1,10,tag.metadata.name)}"
              class="flex flex-col pl-5 gap-y-2"
            >
              <th:block th:if="${posts.total gt 0}">
                <div
                  th:each="post : ${posts.items}"
                  class="flex justify-between"
                >
                  <a
                    th:href="@{${post.status.permalink}}"
                    class="text-sm text-black/80 hover:text-black hover:underline hover:font-medium"
                    th:text="${post.spec.title}"></a>
                  <span
                    class="text-sm text-gray-300"
                    th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd HH:mm')}"
                  ></span>
                </div>
                <div th:if="${posts.total gt 10}" class="flex justify-end mt-2">
                  <a
                    th:href="@{${tag.status.permalink}}"
                    class="text-sm text-black/60 hover:text-black hover:underline hover:font-medium inline-flex items-center"
                  >
                    <IconMdiUnfoldMoreVertical class="mr-2" />
                    更多
                  </a>
                </div>
              </th:block>
              <div th:if="${posts.total eq 0}" class="text-sm text-gray-300">
                此标签没有文章
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</Layout>
